<template>
  <div class="GroupPurchaseStyle">
    <div class="title">{{ datas.text }}</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <el-form-item label="团购标题:" prop="title">
        <el-input v-model="datas.title" />
      </el-form-item>
      <el-form-item label="显示数量:" prop="limit">
        <el-input-number v-model="datas.limit" :controls="false" :min="1" />
      </el-form-item>
      <div class="goods-box">
        <div class="item" v-for="(item, index) in datas.list" :key="index">
          <img class="img" src="/src/assets/images/empty-banner.png" />
          <el-text size="small" class="mt10">{{ item.name }}</el-text>
        </div>
        <div class="item" v-if="datas.list.length === 0">
          <img class="img" src="/src/assets/images/empty-banner.png" />
          <el-text size="small" class="mt10">商品名称</el-text>
        </div>
      </div>
      <el-button class="w100 mt20" :icon="Plus" @click="openSelectTreeTable('团购列表')">选择团购商品</el-button>
    </el-form>
    <SelectTreeTable @selected-list="onSelectedList" ref="selectTreeTableRef" />
  </div>
</template>

<script lang="ts" setup name="GroupPurchaseStyle">
import { ref, toRefs } from "vue";
import { Plus } from "@element-plus/icons-vue";
import SelectTreeTable from "@/components/SelectTreeData/index.vue";
import { getWaresList, getWaresCategoryList } from "@/api/modules/inventory";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
const selectTreeTableRef = ref<InstanceType<typeof SelectTreeTable> | null>(null);
const openSelectTreeTable = (title: string) => {
  const params = {
    title,
    isView: false,
    index: 0,
    selTags: datas.value.list,
    columns: [
      { type: "selection", label: "#", width: 60 },
      { prop: "name", label: "团购名称", align: "left" }
    ],
    idName: "goodsCategoryId",
    treeApi: getWaresCategoryList,
    api: getWaresList
  };
  selectTreeTableRef.value?.acceptParams(params);
};

const onSelectedList = (obj: any) => {
  datas.value.list = obj.list.map(im => {
    return { name: im.name, money: im.posPrice, type: 3, id: im.id };
  });
};
</script>

<style scoped lang="scss">
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.goods-box {
  display: flex;
  .item {
    flex-shrink: 0;
    margin-right: 10px;
    .img {
      display: block;
      width: 60px;
      height: 60px;
    }
  }
}
</style>
